<template>
  <div class="amap-container" ref="mapContainer"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'

const mapContainer = ref(null)
let map = null

// 初始化地图
const initMap = async () => {
  try {
    // 加载高德地图
    const AMap = await AMapLoader.load({
      key: 'b0e75a2d4fe2e623b3b9e75fc8b1cb0f',
      version: '2.0'
    })
    
    // 创建地图实例 - 只使用最基本设置
    map = new AMap.Map(mapContainer.value, {
      zoom: 10.5,
      center: [117.201538, 39.085294], // 天津市中心坐标
      viewMode: '2D',
      mapStyle: 'amap://styles/blue' // 使用内置蓝色主题
    })
    
  } catch (error) {
    console.error('地图加载失败：', error)
  }
}

// 组件挂载时初始化地图
onMounted(() => {
  initMap()
})

// 组件卸载时销毁地图
onUnmounted(() => {
  if (map) {
    map.destroy()
  }
})
</script>

<style lang="scss" scoped>
.amap-container {
  width: 100%;
  height: 100%;
  background-color: #0f1325;
}

:deep(.amap-logo) {
  display: none;
}

:deep(.amap-copyright) {
  display: none;
}
</style> 